// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Geom, Tooltip } from 'bizcharts';

// 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START
const pixelRatio = window.devicePixelRatio * 2;

function onShowTooltip(ev) {
  const items = ev.items;
  items[0].name = null;
  items[0].name = items[0].title;
  items[0].value = `${items[0].value}`;
}

class Histogram extends React.Component {
  render() {
    const { data, defs } = this.props;
    return (
      <Chart  width={window.innerWidth-16} height={280}  padding={[40, 'auto', 40, 'auto']} data={data} defs={defs} animate={{ type: 'scaley' }} pixelRatio={pixelRatio} >
        <Axis dataKey="x" label={{ textAlign: data && (data.length > 10 || data[0].x.length > 5) ? 'start' : '', rotate: data && (data.length > 10 || data[0].x.length > 5) ? 120 : 0}} />
        <Axis dataKey="y" label={{ fontSize: 12 }}/>
        <Tooltip showItemMarker={false} onShow={onShowTooltip} />
        <Geom geom="interval" position="x*y" />
      </Chart>
    );
  }
}

// CDN END
export default Histogram;
